<template>
    <!-- 添加待办或跟进弹窗 -->
    <div class="madp-add-info">
        <dialog-component :title="dialogTitle" :visible.sync="dialogVisible" @confirm="confirmDialog">
            <div class="dialog-container">
                <div class="textarea">
                    <el-input maxlength="150" type="textarea" v-model="inputVal" :rows="5" :placeholder="dialogType == 1 ? '添加更多待办信息' : '添加更多跟进信息'"></el-input>
                </div>
                <div class="choose-date" v-if="dialogType == 1">
                    <span class="left">提醒时间</span>
                    <div class="right">
                        <el-date-picker
                            :editable="false"
                            :picker-options="pickerOptions"
                            v-model="dateTime"
                            type="datetime"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            placeholder="选择日期时间"
                            default-time="00:00:00"
                        >
                        </el-date-picker>
                        <i class="el-icon-arrow-right"></i>
                    </div>
                </div>
            </div>
        </dialog-component>
    </div>
</template>
<script>
    import DialogComponent from '@/components/dialog.vue';

    export default {
        components: { DialogComponent },
        data() {
            return {
                dialogVisible: false,
                inputVal: '',
                dateTime: '',
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() < Date.now() - 8.64e7;
                    }
                }
            };
        },
        props: {
            dialogTitle: {
                type: String,
                default: ''
            },
            dialogType: {
                // 1-添加待办 2-添加跟进
                type: String | Number,
                default: ''
            },
            visible: {
                type: Boolean,
                default: false
            },
            info: {
                type: Object,
                default: () => {
                    return {};
                }
            }
        },
        watch: {
            visible: function () {
                this.dialogVisible = this.visible;
                if (this.dialogVisible) {
                    this.inputVal = this.info.inputVal || '';
                    this.dateTime = this.info.dateTime || '';
                }
            },
            dialogVisible: function () {
                this.$emit('update:visible', this.dialogVisible);
            }
        },
        created() {},
        mounted() {},
        methods: {
            confirmDialog() {
                if (!this.inputVal.trim()) return this.$toast({ text: '请输入内容', type: 'warning' });
                if (this.dialogType == 1 && !this.dateTime) return this.$toast({ text: '请选择提醒时间', type: 'warning' });
                if (new Date().getTime() >= new Date(this.dateTime).getTime()) return this.$toast({ text: '提醒时间不能小于当前时间', type: 'warning' });
                this.$emit('confirm', {
                    inputVal: this.inputVal.trim(),
                    dateTime: this.dateTime
                });
                this.inputVal = '';
                this.dateTime = '';
            }
        }
    };
</script>
<style scoped lang="scss">
    .madp-add-info {
        .dialog-container {
            .textarea {
                margin-bottom: 10px;
            }
            .choose-date {
                margin-bottom: 10px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-top: 1px solid rgba(44, 44, 44, 0.1);
                border-bottom: 1px solid rgba(44, 44, 44, 0.1);
                padding: 0 5px;
                .left {
                    font-size: 16px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: rgba(44, 44, 44, 0.8);
                }
                .right {
                    flex: 1;
                    display: flex;
                    align-items: center;
                    /deep/.el-date-editor {
                        flex: 1;
                        width: 100%;
                        .el-input__inner {
                            width: 100%;
                            text-align: right;
                            padding: 0 5px;
                            border: none;
                        }
                        .el-input__prefix {
                            display: none;
                        }
                        .el-input__suffix {
                            display: none;
                        }
                    }
                }
            }
        }
    }
</style>
